<!-- 清卡 -->
<!-- 补气清零 -->
<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="12" :xs="24">
                <el-card class="box-card">
                    <div class="title">
                        <div class="title_box">
                            <div class="title_icon"></div>
                            <div class="title_value">IC卡信息</div>
                            <div class="title_notes">未获取到IC卡信息，请读卡</div>
                        </div>
                    </div>
                    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="130px">

                        <el-form-item label="客户编号" prop="status" required>
                            <el-input v-model="queryParams.userName" clearable style="width: 200px" disabled />
                        </el-form-item>
                        <el-form-item label="姓名" prop="status" required>
                            <el-input v-model="queryParams.userName" clearable style="width: 200px" disabled />
                        </el-form-item>
                        <el-form-item label="联系方式" prop="status" required>
                            <el-input v-model="queryParams.userName" clearable style="width: 200px" disabled />
                        </el-form-item>
                        <el-form-item label="安装地址" prop="status" required>
                            <el-input v-model="queryParams.userName" clearable style="width: 200px" disabled />
                        </el-form-item>
                        <el-form-item label="上表状态" prop="status" required>
                            <el-input v-model="queryParams.userName" clearable style="width: 200px" disabled />
                        </el-form-item>
                        <el-form-item label="购气金额(气量)" prop="status" required>
                            <el-input v-model="queryParams.userName" clearable style="width: 200px" disabled />
                        </el-form-item>
                        <el-form-item label="总购次数" prop="status" required>
                            <el-input v-model="queryParams.userName" clearable style="width: 200px" disabled />
                        </el-form-item>
                        <el-form-item label="表上总购" prop="status" required>
                            <el-input v-model="queryParams.userName" clearable style="width: 200px" disabled />
                        </el-form-item>


                    </el-form>
                    <div class="foot_btn">
                        <div class="foot_btn_box">
                            <el-select v-model="queryParams.cons_type" filterable placeholder="" style="width:100px">
                                <el-option label="前卫表业" value="industrial"> </el-option>
                                <el-option label="商业" value="commercial"> </el-option>
                                <el-option label="民用" value="civil"> </el-option>
                            </el-select>
                            <el-button icon="el-icon-refresh" size="mini" type="warning">读卡</el-button>
                            <el-button icon="el-icon-refresh" size="mini" type="primary">清卡</el-button>
                        </div>

                    </div>
                </el-card>
                <el-card class="box-card">
                    <div class="title">
                        <div class="title_box">
                            <div class="title_icon"></div>
                            <div class="title_value">历史账单</div>
                        </div>
                    </div>
                    <el-table v-loading="loading" :data="userList" border>
                        <el-table-column label="月份" align="center" key="userName" prop="userName"
                            :show-overflow-tooltip="true" />
                        <el-table-column label="账单金额(元)" align="center" key="userName" prop="userName"
                            :show-overflow-tooltip="true" />
                        <el-table-column label="状态" align="center" key="deptName" prop="dept.deptName"
                            :show-overflow-tooltip="true" />

                    </el-table>
                    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                        :limit.sync="queryParams.pageSize" @pagination="getList" />
                </el-card>

            </el-col>
            <el-col :span="12" :xs="24" class="pay">
                <el-card class="box-card">
                    <div class="title ">
                        <div class="title_box">
                            <div class="title_icon"></div>
                            <div class="title_value">客户信息</div>
                        </div>
                    </div>
                    <el-form :model="queryParams" ref="queryForm" size="small" label-width="130px">
                        <div class="box-card_table">
                            <el-form-item label="姓名" prop="cons_type" required class="form_item" style="width:50%">
                                <el-input v-model="queryParams.userName" clearable disabled />
                            </el-form-item>
                            <el-form-item label="表具编号" prop="userName" required class="form_item" style="width:50%">
                                <el-input v-model="queryParams.userName" clearable disabled />
                            </el-form-item>
                        </div>
                        <div class="box-card_table">
                            <el-form-item label="客户编号" prop="status" class="form_item" style="width:50%">
                                <el-input v-model="queryParams.userName" clearable disabled />
                            </el-form-item>
                            <el-form-item label="计付费方式" prop="userName" class="form_item" style="width:50%">
                                <el-input v-model="queryParams.userName" clearable disabled />
                            </el-form-item>
                        </div>
                        <div class="box-card_table">
                            <el-form-item label="客户类型" prop="userName" class="form_item" style="width:50%">
                                <el-input v-model="queryParams.userName" clearable disabled />
                            </el-form-item>
                            <el-form-item label="策略模板" prop="userName" class="form_item" style="width:50%">
                                <el-input v-model="queryParams.userName" clearable disabled />
                            </el-form-item>
                        </div>
                        <div class="box-card_table">
                            <el-form-item label="联系方式" prop="userName" class="form_item" style="width:50%">
                                <el-input v-model="queryParams.userName" clearable disabled />
                            </el-form-item>
                            <el-form-item label="住房面积(m3)" prop="userName" class="form_item" style="width:50%">
                                <el-input v-model="queryParams.userName" clearable disabled />
                            </el-form-item>
                        </div>
                        <div class="box-card_table">
                            <el-form-item label="常驻人口" prop="userName" class="form_item" style="width:50%">
                                <el-input v-model="queryParams.userName" clearable disabled />
                            </el-form-item>
                            <el-form-item label="安装地址" prop="userName" class="form_item" style="width:50%">
                                <el-input v-model="queryParams.userName" clearable disabled />
                            </el-form-item>
                        </div>

                        <el-divider></el-divider>
                        <div class="box-card_table">
                            <el-form-item label="当前执行价格" prop="userName" class="form_item" style="width:50%">
                                <el-input v-model="queryParams.userName" clearable disabled />
                            </el-form-item>
                            <el-form-item label="总购气量" prop="userName" class="form_item" style="width:50%">
                                <el-input v-model="queryParams.userName" clearable disabled />
                            </el-form-item>
                        </div>
                        <div class="box-card_table">
                            <el-form-item label="总购次数" prop="userName" class="form_item" style="width:50%">
                                <el-input v-model="queryParams.userName" clearable disabled />
                            </el-form-item>
                            <el-form-item label="总充值金额" prop="userName" class="form_item" style="width:50%">
                                <el-input v-model="queryParams.userName" clearable disabled />
                            </el-form-item>
                        </div>
                        <div class="box-card_table">
                            <el-form-item label="写卡次数" prop="userName" class="form_item" style="width:50%">
                                <el-input v-model="queryParams.userName" clearable disabled />
                            </el-form-item>
                            <el-form-item label="上次结余" prop="userName" class="form_item" style="width:50%">
                                <el-input v-model="queryParams.userName" clearable disabled />
                            </el-form-item>
                        </div>

                        <el-divider></el-divider>
                        <div class="box-card_table">
                            <el-form-item label="表上总购" prop="userName" class="form_item" style="width:50%">
                                <el-input v-model="queryParams.userName" clearable disabled />
                            </el-form-item>
                            <el-form-item label="表上剩余" prop="userName" class="form_item" style="width:50%">
                                <el-input v-model="queryParams.userName" clearable disabled />
                            </el-form-item>
                        </div>
                        <div class="box-card_table">
                            <el-form-item label="写卡次数" prop="userName" class="form_item" style="width:50%">
                                <el-input v-model="queryParams.userName" clearable disabled />
                            </el-form-item>
                            <el-form-item label="上次购气日期" prop="userName" class="form_item" style="width:50%">
                                <el-input v-model="queryParams.userName" clearable disabled />
                            </el-form-item>
                        </div>
                        <div class="box-card_table">
                            <el-form-item label="未上表" prop="userName" class="form_item" style="width:50%">
                                <el-input v-model="queryParams.userName" clearable disabled />
                            </el-form-item>
                        </div>

                    </el-form>
                </el-card>
                <el-card class="box-card">
                    <div class="title">
                        <div class="title_box">
                            <div class="title_icon"></div>
                            <div class="title_value">账户流水</div>
                        </div>
                    </div>
                    <el-table v-loading="loading" :data="userList" border>
                        <el-table-column label="时间" align="center" key="userName" prop="userName"
                            :show-overflow-tooltip="true" />
                        <el-table-column label="事项" align="center" key="userName" prop="userName"
                            :show-overflow-tooltip="true" />
                        <el-table-column label="发生额类型" align="center" key="deptName" prop="dept.deptName"
                            :show-overflow-tooltip="true" />
                        <el-table-column label="变动" align="center" key="userName" prop="userName"
                            :show-overflow-tooltip="true" width="100" />
                        <el-table-column label="账户余额(元)" align="center" key="userName" prop="userName"
                            :show-overflow-tooltip="true" width="100" />

                    </el-table>
                    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                        :limit.sync="queryParams.pageSize" @pagination="getList" />
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>
<script>
export default {
    data() {
        return {
            queryParams: {},
            userList: [],
            total: 0,
            queryParams: {
                pageNum: 1,
                pageSize: 10,
            }
        }
    },
    methods: {
        getList() {

        },
    }
}
</script>
<style  lang="scss">
.box-card {
    margin-top: 20px;

    .title {
        height: 40px;
        color: #303133;
        font-weight: 700;
        line-height: 28px;
        padding-left: 10px;
        display: flex;
        padding-left: 10px;
        justify-content: space-between;
        margin-bottom: 30px;
        align-items: center;
        background-color: #F5F7FA;
        border-radius: 5px;

        .title_box {
            width: 100%;
            display: flex;
            align-items: center;

            .title_icon {
                width: 4px;
                height: 18px;
                background-color: #d26454;
                border-radius: 4px;
                margin-right: 10px;
            }

            .title_notes {
                font-weight: 500;
                margin-left: 20px;
            }
        }


    }

    .title_color {
        background-color: #8ab5f27b;
    }
}

.foot_btn {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 20px;

    .foot_btn_box {
        width: 400px;
        display: flex;
        justify-content: space-around;
    }
}

.box-card_table {
    display: flex;
    width: 100%;
    justify-content: flex-start;
}

.form_item .el-form-item__label {
    background-color: #f6f6f6;
    color: #333;
    border: 1px solid #ebeef5;
}

.pay .el-form-item--small.el-form-item {
    margin-bottom: 0px
}
</style>